<template>
  <el-row class="container">
    <FontSizeAdaptor />
    <!--    第一行-->
    <el-row class="row1">
      <!--      户表总数-->
      <el-row type="flex" justify="space-between" :gutter="10" class="row-main">
        <el-col :span="8" class="row-main_item">
          <el-col :span="8" class="row-main_item_left">
            <div class="row-main_item_left_img" ref="lottie1"></div>
          </el-col>
          <el-col :span="16" class="row-main_item_right">
            <el-row class="row-main_item_right_title">
              户表总数
            </el-row>
            <el-row class="row-main_item_right_content1">
              <span class="num font-color_blue">{{ count === null ? 0 : count  }} </span>
              <span class="unit font-color_blue">个</span>
            </el-row>
          </el-col>
        </el-col>
        <!--        用水量-->
        <el-col :span="8" class="row-main_item">
          <el-col :span="8" class="row-main_item_left">
            <div class="row-main_item_left_img" ref="lottie2"></div>
          </el-col>
          <el-col :span="16" class="row-main_item_right">
<!--            <span style="font-size: 1.8vh;">（m³）</span>-->
            <el-row class="row-main_item_right_title">
              用水量
            </el-row>
            <el-row class="row-main_item_right_content">
              <el-row class="row-main_item_right_content_dosage">
                <span class="unit">昨日</span>
                <span class="num font-color_orange">{{ yesterdayUsage === null ? 0 : yesterdayUsage }}</span>
                <span style="font-size: 1rem">m³</span>
              </el-row>
              <el-row class="row-main_item_right_content_dosage">
                <span class="unit">上月</span>
<!--                {{ lastMonthUsage === null ? 0 : lastMonthUsage }}-->
                <span class="num font-color_orange">{{ lastMonthUsage === null ? 0 : lastMonthUsage }}</span>
                <span style="font-size: 1rem">m³</span>
              </el-row>
            </el-row>
          </el-col>
        </el-col>
        <!--        水表动态-->
        <el-col :span="8" class="row-main_item">
          <el-col :span="8" class="row-main_item_left">
            <div class="row-main_item_left_img" ref="lottie3"></div>
          </el-col>
          <el-col :span="16" class="row-main_item_right">
<!--            <span style="font-size: 1.8vh">（台）</span>-->
            <el-row class="row-main_item_right_title">
              水表动态
            </el-row>
            <el-row class="row-main_item_right_content">
              <el-row class="row-main_item_right_content_dosage">
                <span class="unit">本月新增</span>
                <span class="num font-color_blue">{{ thisMonthCount === null ? 0 : thisMonthCount }}</span>
                <span style="font-size: 0.7rem">台</span>
              </el-row>
              <el-row class="row-main_item_right_content_dosage">
                <span class="unit">本年新增</span>
                <span class="num font-color_blue">{{ thisYearCount === null ? 0 : thisYearCount }}</span>
                <span style="font-size: 0.7rem">台</span>
              </el-row>
            </el-row>
          </el-col>
        </el-col>
      </el-row>
    </el-row>
    <!--    第二行-->
    <el-row class="row2">
      <el-row type="flex" justify="space-between" class="row-main" :gutter="5">
        <el-col :span="18" class="main-left">
          <el-row class="main-left_top" :gutter="5">
            <!--日用量统计-->
            <el-col :span="12" class="top_e">
              <DayDosageStatisticsEcharts></DayDosageStatisticsEcharts>
            </el-col>
            <!--月用量统计-->
            <el-col :span="12" class="top_e">
              <MonthDosageStatisticEcharts></MonthDosageStatisticEcharts>
            </el-col>
          </el-row>
<!--          抄回数\抄表率统计-->
          <el-row class="main-left_bottom">
            <ReadingRateEcharts></ReadingRateEcharts>
          </el-row>
        </el-col>
        <el-col :span="6" class="main-right">
          <div class="main-right_center">
            <div class="main-right_center_item" v-for="(item, index) in list1">
              <div :class="'main-right_center_item_left' + index">
              </div>
              <div class="main-right_center_item_right">
                <div class="right_r1">
                  <div class="right_r_title">{{ item.title }}</div>
                  <div class="right_r_description">{{ item.description }}</div>
                </div>
                <div class="right_r2">
                  <span class="right_r_num">{{ item.num === null ? 0 : item.num }} </span>
                  <span style="font-size: 0.5rem;color: #646464">{{item.unit}}</span>
                </div>
              </div>
            </div>
          </div>

          <el-row class="main-right_top">
            <!-- 根据表型号统计户表总数-->
<!--            <SumByTypeStatistics></SumByTypeStatistics>-->
<!--            根据厂家统计户表数量-->
            <SumByFactoryXb></SumByFactoryXb>
          </el-row>

          <el-row class="main-right_bottom">
            <AlarmEcharts ref="alarmEcharts"></AlarmEcharts>
          </el-row>
        </el-col>
      </el-row>
    </el-row>
  </el-row>
</template>
<script>
import FontSizeAdaptor from '../../components/FontSizeAdaptor/FontSizeAdaptor.vue';
import lottie1 from '../../assets/lottie/comprehensive.json'
import lottie2 from '../../assets/lottie/water.json'
import lottie3 from '../../assets/lottie/trends.json'
import DayDosageStatisticsEcharts from "./components/DayDosageStatisticsEcharts.vue";
import MonthDosageStatisticEcharts from "./components/MonthDosageStatisticEcharts.vue";
// import SumByTypeStatistics from "./components/SumByTypeStatistics.vue";
import ReadingRateEcharts from "./components/ReadingRateEcharts.vue";
import AlarmEcharts from "./components/AlarmEcharts.vue";
import SumByFactoryXb from "./components/SumByFactoryXb.vue";
import {homepageDataForXb} from '@/api/index/meteread.js'

export default {
  name: "MetereadIndex",
  components: {FontSizeAdaptor, ReadingRateEcharts, DayDosageStatisticsEcharts, MonthDosageStatisticEcharts, SumByFactoryXb, AlarmEcharts},
  data() {
    return {
      // 户表总数
      count: null,
      // 昨日用水量
      yesterdayUsage: null,
      // 上月用水量
      lastMonthUsage: null,
      // 本月新增户表数
      thisMonthCount: null,
      // 本年新增户表数
      thisYearCount: null,
      warnList: [],
      list1: [
        { title: '抄回数', num: null, description: '昨日', unit: '台'},
        { title: '采集器数量', num: null, description: '当前用户', unit: '台'},
        { title: '集中器数量', num: null, description: '当前用户', unit: '台'},
        { title: '用户数量', num: null, description: '已绑户表', unit: '个'}
      ],
    }
  },
  mounted() {
    window.requestAnimationFrame(this.loadImg1)
    window.requestAnimationFrame(this.loadImg2)
    window.requestAnimationFrame(this.loadImg3)
    this.getData()
  },
  watch: {
    warnList(newVal) {
      this.$refs.alarmEcharts.updateList(newVal)
    }
  },
  methods: {

    // 获取数据
    getData() {
      homepageDataForXb({}).then(response => {
        if (response.code === 200) {
          this.count = response.data.count
          this.yesterdayUsage = Math.floor(response.data.yesterdayUsage)
          this.lastMonthUsage = Math.floor(response.data.lastMonthUsage)
          this.thisMonthCount = response.data.thisMonthCount
          this.thisYearCount = response.data.thisYearCount

          this.list1[0].num = response.data.yesterdayCopyCount
          this.list1[1].num = response.data.collectorCount
          this.list1[2].num = response.data.concentratorCount
          this.list1[3].num = response.data.userCount
          this.warnList = response.data.warn
        }
      })
    },
    loadImg1() {
      // this.$nextTick(() => {
        this.$lottie.loadAnimation({
          // 指定动画将要渲染的DOM元素
          container: this.$refs.lottie1,
          // 使用SVG渲染
          renderer: 'svg',
          // 设置动画循环播放
          loop: true,
          // 设置动画自动播放
          autoplay: true,
          // 动画的数据
          animationData: lottie1
        })
      // })
    },
    loadImg2() {
      // this.$nextTick(() => {
        this.$lottie.loadAnimation({
          container: this.$refs.lottie2,
          renderer: 'svg',
          loop: true,
          autoplay: true,
          animationData: lottie2
        })
      // })
    },
    loadImg3() {
      // this.$nextTick(() => {
        this.$lottie.loadAnimation({
          container: this.$refs.lottie3,
          renderer: 'svg',
          loop: true,
          autoplay: true,
          animationData: lottie3
        })
      // })
    },
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  overflow: auto;
  padding-bottom: 5px;
  //第一行
  .row1 {
    height: 18vh;
    width: 98%;
    margin: 5px auto 0 auto;
    background-color: white;
    border-radius: 5px;

    .row-main {
      height: 100%;

      .row-main_item {
        height: 100%;

        .row-main_item_left {
          height: 100%;
          position: relative;

          .row-main_item_left_img {
            height: 80%;
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

        ::v-deep .row-main_item_right {
          padding: 0 10px 10px 0 !important;
          height: 100%;
          position: relative;

          .row-main_item_right_title {
            font-size: 1.3rem;
            font-weight: 500;
            color: #646464;
            height: 50%;
            display: flex;
            align-items: center;

          }

          .row-main_item_right_content1{
            height: 50%;
            line-height: 9vh;
            //display: flex;
            .num{
              //flex: 1;
              //text-align: right;
              padding-right: 10px;
              //font-size: 4.5vh;
              font-size: 2rem;
              font-weight: bolder;
              font-family: "Agency FB";
            }
            .unit {
              //flex: 2;
              //text-align: left;
              color: #646464;
              font-size: 0.8rem;
            }
          }

          .row-main_item_right_content {
            //text-align: right;
            height: 50%;
            line-height: 9vh;

            .row-main_item_right_content_dosage {
              //background-color: red;
              height: 50%;
              line-height: 4.5vh;
              .unit {
                //text-align: right;
                color: #646464;
                font-size: 0.85rem;
                padding-right: 10px;
              }

              .num {
                //text-align: left;
                //color: #fa9237;
                padding-right: 10px;
                font-size: 1.6rem;
                font-weight: bolder;
                font-family: "Agency FB";
              }
            }
          }
        }
      }
    }
  }

  //第二行
  .row2 {
    width: 98%;
    margin: 5px auto 0 auto;
    border-radius: 5px;

    .row_main {
      width: 100%;
    }
    //左侧三个图表
    .main-left {
      .main-left_top {
        margin-bottom: 5px;
        .top_e {
          height: 100%;
        }
      }

      .main-left_bottom {
        //height: 40vh;
      }
    }

    //右侧统计图表
    .main-right {
      .main-right_top {
        //margin-bottom: 10px;
      }

      .main-right_center {
        height: 21vh;
        margin-bottom: 5px;
        background-color: white;
        border-radius: 5px;
        padding: 10px;
        .main-right_center_item{
          height: 10vh;
          width: 50%;
          padding-bottom: 15px;
          padding-right: 10px;
          float: left;
          display: flex;
          .main-right_center_item_left0{
            flex: 1.2;
            background: url("../../assets/images/index_8.png") no-repeat;
            background-size: 100% 100%;
            //border-radius: 50%;
          }
          .main-right_center_item_left1{
            flex: 1.2;
            background: url("../../assets/images/index_9.png") no-repeat;
            background-size: 100% 100%;
            //border-radius: 50%;
          }
          .main-right_center_item_left2{
            flex: 1.2;
            background: url("../../assets/images/index_10.png") no-repeat;
            background-size: 100% 100%;
            //border-radius: 50%;
          }
          .main-right_center_item_left3{
            flex: 1.2;
            background: url("../../assets/images/index_11.png") no-repeat;
            background-size: 100% 100%;
            //border-radius: 50%;
          }
          .main-right_center_item_right{
            flex: 2;

            .right_r1{
              height: 4vh;
              margin-top: 5px;
              margin-left: 10px;
              .right_r_title{
                font-size: 0.65rem;
                color: #646464;
                font-weight: 520;
              }
              .right_r_description{
                font-size: 0.55rem;
                padding-top: 2px;
                color: #969696;
                line-height: 2vh;
              }
            }
            .right_r2 {
              height: 5vh;
              margin-left: 10px;
              .right_r_num{
                line-height: 5vh;
                font-size: 1rem;
                font-weight: bolder;
                font-family: "Agency FB";
                color: #1c84c6;
              }
            }
          }
        }
      }

      .main-right_bottom {
        margin-top: 5px;
        height: 20vh;
      }
    }
  }
}

.font-color_blue {
  color: #1c84c6;
}

.font-color_orange {
  color: #fa9237;
}

</style>
